<template>
  <div class="binding-container">
    <div class="top">
      <img class="logo" src="../../../static/images/userAvatar.png" alt="">
      <div class="top-words">欢迎使用冠鼎食材一站式服务</div>
      <div class="top-words">请绑定手机号</div>
    </div>
    <div class="main-content">
      <div class="one-column-tri">
        <i class="iconfont icon-tel">&#xe62f;</i>
        <input type="text" class="tel-input" v-model="telNumber" placeholder="请您输入手机号码" id="1">
        <div class="getVerify-btn" v-if="time === 60" @click="getVerify">{{ vertifyTips }}</div>
        <div class="getVerify-btn" v-else>已发送({{ time }})</div>
      </div>
      <div class="one-column">
        <i class="iconfont icon-code">&#xe636;</i>
        <input type="text" class="tel-input" v-model="inputVertifyCode" placeholder="手机验证码" id="2">
      </div>
      <div class="one-column-tri">
        <i class="iconfont icon-code">&#xe668;</i>
        <input type="text" class="tel-input" v-model="inputCode" placeholder="右侧验证码" id="3">
        <div class="code-btn" @click="createCode">{{code}}</div>
      </div>
    </div>
    <div class="complete-btn" @click="complete">完成</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      telNumber: '',
      inputVertifyCode: '',
      vertifyCode: '',
      inputCode: '',
      code: '',
      vertifyTips: '验证码',
      time: 60,
      timerSec: null
    }
  },

  methods: {
    everySec () {
      let second = Number(this.time)
      if (second <= 0) {
        this.time = 60
        clearTimeout(this.timerSec)
      } else {
        second--
        if (second >= 0 && second < 10) {
          this.time = '0' + second
        } else if (second >= 10 && second < 60) {
          this.time = '' + second
        }
      }
    },
    getVerify () {
      let telRegex = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/
      if (!this.telNumber || !telRegex.test(this.telNumber)) {
        wx.showToast({
          title: '请输入正确的手机号码',
          icon: 'none',
          duration: 1000
        })
      } else {
        wx.showToast({
          title: '验证码以发送',
          icon: 'success',
          duration: 1000
        })
        this.timerSec = setInterval(() => {
          // 每秒刷新
          this.everySec()
        }, 1000)
      }
    },
    createCode () {
      this.code = Math.floor(Math.random() * 10000)
      this.code = this.code + ''
      console.log(this.code, this.code.length)
      if (this.code.length !== 4) {
        this.createCode()
      }
    },
    complete () {
      // 验证输入的验证码 错误提示
      if (this.inputCode && this.inputCode === this.code) {
        if (this.inputVertifyCode && this.inputVertifyCode === this.vertifyCode) {
          // 调用接口
          wx.showToast({
            title: '手机号绑定成功',
            icon: 'success',
            duration: 1000
          })
          setTimeout(() => {
            wx.navigateBack({})
          }, 1000)
        } else {
          wx.showToast({
            title: '请输入正确的手机验证码',
            icon: 'none',
            duration: 1500
          })
        }
      } else {
        wx.showToast({
          title: '请输入图片的手机验证码',
          icon: 'none',
          duration: 1500
        })
      }
    }
  },

  onShow () {
    this.createCode()
    this.time = 60
  }
}
</script>

<style scoped>
.binding-container {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: #fff;
}

.top {
  padding-top: 93rpx;
  text-align: center;
}

.logo {
  margin-bottom: 37rpx;
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
}

.top-words {
  line-height: 50rpx;
  font-size: 30rpx;
}

.main-content {
  padding: 40rpx 50rpx 40rpx 40rpx;
}

.one-column,
.one-column-tri {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 25rpx 0;
  border-bottom: 2rpx solid #c9c9c9;
}

.one-column {
  justify-content: flex-start;
}

.one-column-tri {
  justify-content: space-between;
}

.icon-tel {
  font-size: 55rpx;
  color: #22ac38;
}

.icon-code {
  font-size: 35rpx;
  margin: 0 10rpx;
  color: #22ac38;
}
.tel-input {
  width: 440rpx;
  font-size: 30rpx;
  padding: 0 20rpx;
}

.getVerify-btn,
.code-btn {
  padding: 10rpx 0;
  text-align: center;
  font-size: 30rpx;
  background-color: #22ac38;
  color: #fff;
  border-radius: 8rpx;
}

.getVerify-btn {
  background-color: #22ac38;
  color: #fff;
  width: 170rpx;
}
.code-btn {
  background-color: #e7e7e7;
  color: #969696;
  margin-left: 80rpx;
  width: 90rpx;
}

.complete-btn {
  margin: 36rpx 50rpx;
  box-sizing: border-box;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  font-size: 32rpx;
  background-color: #22ac38;
  color: #fff;
  border-radius: 8rpx;
}
</style>
